<template>
<div class="store-view">
  <!-- 店铺基本信息 -->
  <el-card class="store-info-card" :style="{ backgroundImage: `url(${brand.backgroundImageUrl})` }">
    <div style="display: flex;margin-bottom: 20px">
      <div class="store-header">
        <img :src="brand.brandLogoUrl" alt="品牌 logo" class="brand-logo">
        <div>
          <h1>{{ brand.brandName }}</h1>
          <h2>{{ brand.brandDescription }}</h2>
        </div>
        <el-button type="primary" @click="favoriteProduct">收藏店铺</el-button>
      </div>
      <div class="store-stats">
        <span>平均评分: {{ brand.averageRating }}</span>
        <span>好评数量: {{ brand.positiveReviewCount }}</span>
        <span>销量: {{ brand.salesVolume }}</span>
      </div>
    </div>
    <goods-query @search="handleSearch" style="opacity: 0.9"></goods-query>
  </el-card>

  <!-- 商品列表 -->
  <el-card class="product-list-card">
    <goods-result :searchParams="searchParams" />
  </el-card>
</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import {addToFavorites, getBrandInfo,addToStore, getBrandProductsWithConditions} from '@/common/net/api'; // 请根据实际路径调整
import { ElMessage } from 'element-plus';
import ProductDetail from '@/components/goodsList/ProductDetail.vue';
import type {Brand} from "@/common/types/goodsType"; // 请根据实际路径调整
import GoodsResult from '@/components/goodsList/GoodsResult.vue'; // 引入 GoodsResult 组件
import GoodsQuery from '@/components/goodsList/GoodsQuery.vue';
import {useRoute} from "vue-router";

const route = useRoute();
const brandId = Number(route.params.brandId); // 获取路由参数
// 定义接口和类型
interface Product {
  productId: number;
  productName: string;
  price: number;
  quantity: number;
  // 可以根据实际情况添加更多属性
}

interface PageResult<T> {
  records: T[];
  total: number;
  size: number;
  current: number;
  // 可以根据实际情况添加更多分页相关属性
}

interface ApiResponse<T> {
  code: number;
  message: string;
  data: T;
}

// 定义响应式数据
const brand = ref<Brand>({});
const products = ref<Product[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalProducts = ref(0);
const searchParams = ref({
  brandId: brandId,
  keyword: '',
  minPrice: '',
  maxPrice: '',
  categoryId: ''
});
const favoriteProduct = async () => {
  try {
    await addToStore(brandId).then(res=>{
      if (res.data.state ) {
        ElMessage.success('收藏店铺成功！');
      }else{
        ElMessage.error(res.data.msg);
      }
    });

  } catch (error) {
    ElMessage.error('收藏商品失败');
  }
};
// 模拟获取店铺信息，实际需要实现对应的 API
const fetchBrandInfo = async () => {
  try {
    const response = await getBrandInfo(brandId);
    brand.value = response.data.data;
  } catch (error) {
    brand.value = {
      brandId: 1,
      brandName: '示例品牌',
      brandLogoUrl: 'https://example.com/logo.png',
      brandDescription: '这是一个示例品牌的描述',
      averageRating: 4.5,
      positiveReviewCount: 100,
      salesVolume: 200,
      createdAt: new Date()
    };
    ElMessage.error('获取店铺信息失败');
  }

};
// 处理搜索事件
const handleSearch = (params:any) => {
  searchParams.value = { ...searchParams.value, ...params };
};

onMounted(async () => {
  await fetchBrandInfo();
});
</script>

<style scoped lang="scss">
.store-view {
  padding: 20px;
}

.store-info-card {
  margin-bottom: 10px;
}

.store-header {
  display: flex;
  align-items: center;
  margin-left: 30px;
  gap: 20px;
  flex: 3;
}

.brand-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.store-stats {
  display: flex;
  gap: 20px;
  flex: 1;
  font-weight: bold;
  margin-top: 25px;
  font-size: 20px;
}

.product-list-card {
  margin: 10px 0px;
}
</style>
